import { acceptHMRUpdate, defineStore } from 'pinia'

export const useWindowStore = defineStore('window', () => {
  const { width: windowWidth, height: windowHeight } = useWindowSize()
  const bodyRef = ref(document.body) // 直接引用 body
  const { width: bodyWidth } = useElementSize(bodyRef as Ref<HTMLElement>)

  /** 🔖此处的ref不要删，体育投注单要计算高度用 */
  const isMobile = computed(() => true)
  const appHeaderRef = ref()
  const appFooterRef = ref()
  const { height: headerHeight } = useElementSize(appHeaderRef)
  const { height: footerHeight } = useElementSize(appFooterRef)

  /** 宽度边界 638 xs */
  const widthBoundaryXs = ref(638)
  /** 宽度边界 768 sm */
  const widthBoundarySm = ref(768)
  /** 宽度边界 975 md */
  const widthBoundaryMd = ref(975)
  /** 宽度边界 1200 lg */
  const widthBoundaryLg = ref(1200)
  /** 宽度边界 1290 xl */
  const widthBoundaryXl = ref(1290)

  return {
    isMobile,
    widthBoundaryXs,
    widthBoundarySm,
    widthBoundaryMd,
    widthBoundaryLg,
    widthBoundaryXl,
    windowWidth,
    windowHeight,
    bodyWidth,
    appHeaderRef,
    appFooterRef,
    headerHeight,
    footerHeight,
  }
})

if (import.meta.hot)
  import.meta.hot.accept(acceptHMRUpdate(useWindowStore, import.meta.hot))
